<template>
  <div class="assignCustomers">
    <h2 class="title">{{buildingAlias}}</h2>
    <div style="margin-top:10px;">
      <Select v-model="adviserVal" placeholder="选择需分出客户的人员" @on-change="adviserChange"
        style="width: 220px;margin-right:14px;">
        <Option v-for="(item, index) in adviserList" :key="index" :value="item.userId"
          :label="item.userName">
        </Option>
      </Select>
      <Button type="primary" @click="assignRecord">分配记录</Button>
      <Button type="primary" @click="adjustHeader" style="margin-left:8px">调整表头排序</Button>
    </div>
    <div class="btn" v-if="unlocking('0101010201')"><span>共{{customerAllLength}}客户</span>
      <Button type="primary" style="width:80px;" @click="modalOut(1)">全部分出</Button> </div>
    <div class="btn"><span>已选{{customerChoosedLength}}客户</span> <Button type="primary"
        style="width:80px;" @click="modalOut(0)">分出</Button> </div>
    <dt-grid ref="table" page :columns="columns" :onFetch='onFetch' :select='select' />
    <assign-user ref="assignUser" @onsuccess='onSuccess' />
    <assign-record ref="assignRecord"></assign-record>
    <!--表头排序-->
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage">
    </preview-image>
  </div>
</template>
<script>
  import customerMgr from '@/biz/customer/customer'
  import assignRecord from './components/assignRecord.vue'
  import columnsAssign from './opt/assignColumns'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import customerOptMgr from '@/biz/customer/customerOpt.js'
  import assignUser from './components/assignUser.vue'
  import dynamicHeader from '@/components/dynamicHeader.vue'
  export default {
    components: {
      assignRecord,
      assignUser,
      dynamicHeader
    },
    data() {
      return {
        adviserVal: this.$route.query.userId ? Number(this.$route.query.userId) : null,
        adviserList: '',
        buildingId: this.$dt.buildInfo().housesId,
        buildingAlias: this.$dt.buildInfo().housesName,
        customerChoosedLength: 0,
        customerAllLength: 0,
        customerIds: [], //选中的客户ID
        data: [],
        select: {
          change: (e) => { this.tableChange(e) },
        },
        currentName: '',
        columns: [],
        sourcedata: [],
        targetdata: [],
        showIndex: 0,
        preViewImg: [],
      }
    },
    methods: {
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      // 调整表头排序
      headUpdate(params) {
        params.type = 2
        clueCustomerMgr.clueHeadUpdate(params).then((res) => {
          this.getHeadList()
          this.$nextTick(function() {
            this.$refs.dynamicHeader.hide()
          })
        })
      },
      // 获取表头
      getHeadList() {
        customerOptMgr.columns(true, 2, false)
          .then((res) => {
            if (res) {
              this.columns = columnsAssign.options(this, res.resArr)
              this.sourcedata = res.hiedHead
              this.targetdata = res.showHead
            }
          })
      },
      onSuccess() {
        this.reCustomerList()
      },
      //表格选中
      tableChange(val) {
        this.customerIds = []
        if (val && val.length) {
          this.customerChoosedLength = val.length
          val.forEach((item) => {
            if (item.customerId) {
              this.customerIds.push(Number(item.customerId))
            }
          })
        } else {
          this.customerIds = []
          this.customerChoosedLength = 0
        }
      },
      assignRecord() {
        this.$refs.assignRecord.show()
      },
      assignUser(data) {
        this.$refs.assignUser.show(data)
      },
      modalOut(val) {
        if (!this.adviserVal) {
          this.$Message.warning('请选择被分配人员。')
          return false
        }
        this.adviserList.forEach((item) => {
          if (item.userId == this.adviserVal) {
            this.currentName = item.userName
          }
        })
        let data = {
          list: this.customerIds,
          currentName: this.currentName,
          adviserVal: this.adviserVal,
          customerChoosedLength: this.customerChoosedLength,
          customerAllLength: this.customerAllLength
        }
        if (val == 0) {
          if (this.customerIds.length) {
            data.operationType = 0
            this.assignUser(data)
          } else {
            this.$Message.warning('请选择分配的客户。')
          }
        } else {
          if (this.data.length) {
            data.operationType = 1
            data.list = []
            this.assignUser(data)
          } else {
            this.$Message.warning('该人员还没有客户。')
          }
        }
      },
      //顾问更改
      adviserChange(val) {
        if (val) {
          this.reCustomerList()
        }
      },
      getAdviserList() {
        let params = {
          buildingId: Number(this.buildingId),
          onlineType: 2,
          haveRole: 2,
        }
        customerMgr.adviserList(params).then((res) => {
          this.adviserList = res
        })
      },
      reCustomerList() {
        this.customerChoosedLength = 0
        this.customerAllLength = 0
        this.$refs.table.fetch()
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      },
      onFetch(data) {
        let params = {
          ...data,
          buildingId: this.buildingId,
          userIds: this.adviserVal ? [this.adviserVal] : [], //归属id
        }
        return customerMgr.getCustomerListNew(params).then((res) => {
          res.records && res.records.forEach(item => {
            if (item.featurePhoto) {
              item.featurePhoto = item.featurePhoto.split(',')
            } else {
              item.featurePhoto = []
            }
          });
          this.customerIds = []
          this.customerChoosedLength = 0
          res.list = res.records
          this.data = res.records
          this.customerAllLength = res.total
          return res
        })
      }
    },
    async mounted() {
      this.getAdviserList() //获取
      await this.getHeadList()
      customerOptMgr.getConsultant()
      customerOptMgr.getFilterOptions()
      customerOptMgr.getChannel()
      customerOptMgr.getArea()
      this.$refs.table.init(this)
      if (this.adviserVal) {
        this.reCustomerList()
      }
    },
  }
</script>
<style lang="scss" scoped>
  .assignCustomers {
    padding: 20px;

    .btn {
      margin: 10px 0;
      width: 200px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 32px;
    }
  }
</style>